<template>
  <div class="ask-buy">
    <div class="ab-main">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item
          label="求购标题"
          prop="title"
        >
          <el-input
            :style="{width: '300px'}"
            v-model="ruleForm.title"
            placeholder="请输入求购标题！"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="求购内容"
          prop="content"
        >
          <el-input
            :style="{width: '400px'}"
            type="textarea"
            placeholder="请输入描述求购需求！"
            v-model="ruleForm.content"
            :autosize="{ minRows: 6}"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="上传附件"
          prop="file"
        >
          <el-upload
                  action=" https://api.nbyid.cn/mlcc/user/interface/uploadImage"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                  :on-success="handleSuccess"
                  ref="upload">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>

        </el-form-item>

<!--        <el-form-item>-->
<!--          <j-image-upload text="上传" v-model="fileList" style="width: 150px;height: 120px;"></j-image-upload>-->
<!--        </el-form-item>-->

        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm('ruleForm')"
            class="ask-buy-submit"
          >提交</el-button>

          <el-button
            @click="$router.push('/')"
            style="background-color: #deded9;color: #2D2D2D"
          >取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import { deleteAction, postAction, getAction } from '@/api/manage'
  // eslint-disable-next-line no-irregular-whitespace
  import Qs from "qs";

export default {
  data() {
    return {
      fileList: [],
      ruleForm: {
        title: "",
        content: "",
        fileList: "",
      },
      //图片
      dialogImageUrl: '',//上传的图片路径
      dialogVisible: false,
      url: {
        add: '/logic/interface/looking_products',
        uploadImg: '/user/interface/uploadImage'
      },
      rules: {
        title: [
          { required: true, message: "请输入求购标题！", trigger: "blur" },
        ],
        content: [
          { required: true, message: "请输入描述求购需求！", trigger: "blur" },
        ],
        fileList: [{ required: true, message: "请上传附件！", trigger: "blur" }],
      },
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    //上传图片成功函数
    handleSuccess(response,file, fileList) {
       var result = response;
      this.dialogImageUrl += result.data+",";
    },

    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    submitForm(formName) {
      // this.$confirm({
      //   title: "确认操作",
      //   content: "是否立即产品求购?",
      //   onOk: function () {
      //     postAction(this.publicUrl+this.lookingProducts,params).then(res=>{
      //       if(res.success){
      //         let result = res.result
      //         console(this.ruleForm.title+"==="+this.ruleForm.content)
      //         console(result)
      //       }else{
      //         this.$message.warning(res.message)
      //       }
      //     })
      //   }
      // });
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let autohor_token = localStorage.getItem("token");
          var params = {token:autohor_token,looking_title:this.ruleForm.title,
            looking_detail:this.ruleForm.content,
            imgs:this.dialogImageUrl};
          postAction(domain.publicUrl+this.url.add,Qs.stringify(params)).then(res=>{
            var result = res.data;
            console.log(result)
            if(result.code==0){
              this.$message.success("产品求购成功！")
              this.ruleForm.title="";
              this.ruleForm.content="";
              this.ruleForm.fileList="";
              this.$refs.upload.clearFiles();
            }else{
              this.$message.error(result.msg)
            }
          })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.ask-buy {
  box-sizing: border-box;
  padding: 30px 90px;
  .ab-main {
    background: #fff;
    box-sizing: border-box;
    padding: 20px 40px 30px;
    .ask-buy-btn {
      width: 100px;
      height: 40px;
      background: #ffe56d;
      border-radius: 3px;
      font-size: 14px;
      color: #333333;
    }
    .ask-buy-submit {
      width: 76px;
      height: 36px;
      background: #303030;
      border-radius: 3px;
      font-size: 14px;
      color: #ffe56d;
      margin-left: 10px;
      cursor: pointer;
      margin-top: 50px;
    }
    .ask-buy-go-back {
      width: 76px;
      height: 36px;
      background: #e4e4e4;
      border-radius: 3px;
      font-size: 14px;
      color: #333333;
      margin-left: 10px;
      cursor: pointer;
      margin-top: 50px;
    }
  }
}
</style>
